<template>
    <div class="BCRB"  v-if="booklist">
        <!-- 推荐 -->
        <div class="BCRMD">
            <div class="BookCRMBcontainer">
                <div class="h3">
                    <span class="iconfont icon-diamond diamond"></span>
                    <span class="txmiddle">经典小说</span>
                    <span class="mfred">免费看</span>
                </div>
                <div class="tuijian">
                    <router-link :to="'/TheWorkDetails?id='+booklist[4].list[index].id" tag="div" class="tuijianBox" v-for="(item,index) in booklist[4].list" :key="booklist[4].list[index].id">
                        <!-- <div class="tuijianBox"> -->
                            <div class="tjImg">
                                <img :src="item.cover" alt="">
                            </div>
                            <div class="tjname">
                                <span>{{item.title}}</span>
                            </div>
                        <!-- </div> -->
                    </router-link>
                </div>
            </div>
        </div>
        <!-- 全网大热榜 -->
        <div class="popular">
            <div class="BookCRMBcontainer">
                <div class="AllTitle">全网大热榜</div>
                <div class="popContent">
                    <!-- <div class="popli" v-for="(item,index) in booklist[2].list.slice(0,3)" :key="booklist[2].list[index].id"> -->
                    <router-link class="popli" v-for="(item,index) in booklist[2].list.slice(0,3)" :key="booklist[2].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[2].list[index].id">
                        <div class="popliImg">
                            <img :src="item.cover" alt="">
                            <span class="popTag">{{index+1}}</span>
                        </div>
                        <div class="popliText">
                            <p class="PLTname">{{item.title}}</p>
                            <p class="Popularity">{{item.clickCount | hotCount}}热度</p>
                        </div>
                    </router-link>
                    <!-- </div> -->
                    <!-- <div class="popli" v-for="(item,index) in booklist[3].list" :key="booklist[3].list[index].id"> -->
                    <router-link class="popli" v-for="(item,index) in booklist[3].list.slice(0,3)" :key="booklist[3].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[3].list[index].id">
                        <div class="popliImg">
                            <img :src="item.cover" alt="">
                            <span class="popTag">{{index+4}}</span>
                        </div>
                        <div class="popliText">
                            <p class="PLTname">{{item.title}}</p>
                            <p class="Popularity">{{item.clickCount | hotCount}}热度</p>
                        </div>
                    </router-link>
                    <!-- </div> -->
                </div>
            </div>
        </div>
        <!-- 必看言情 -->
        <div class="AllBox">
            <div class="BookCRMBcontainer">
                <div class="AllTitle">必看言情</div>
                <!-- <div class="AllContent" v-for="(item,index) in booklist[5].list.slice(0,3)" :key="booklist[5].list[index].id"> -->
                <router-link class="AllContent" v-for="(item,index) in booklist[5].list.slice(0,3)" :key="booklist[5].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[5].list[index].id">
                    <div class="AllImg">
                        <img :src="item.cover" alt="">
                    </div>
                    <div class="AllText">
                        <div class="ATname">
                            <span class="NA">{{item.title}}</span>
                            <span>9.3<span class="small">分</span></span>
                        </div>
                        <div class="ATintroduce">
                        <p class="ATintroduceText">{{item.content}}</p>
                        </div>
                        <div class="ATwriter">
                            <span>{{item.author}}</span>
                            <span class="rq">{{item.clickCount | hotCount}}人气</span>
                        </div>
                    </div>
                </router-link>
                <!-- </div> -->
            </div>
        </div>
        <!-- 必看爽文 -->
        <div class="AllBox">
            <div class="BookCRMBcontainer">
                <div class="AllTitle">必看爽文</div>
                <!-- <div class="AllContent" v-for="(item,index) in booklist[6].list.slice(0,3)" :key="booklist[6].list[index].id"> -->
                <router-link class="AllContent" v-for="(item,index) in booklist[6].list.slice(0,3)" :key="booklist[6].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[6].list[index].id">
                    <div class="AllImg">
                        <img :src="item.cover" alt="">
                    </div>
                    <div class="AllText">
                        <div class="ATname">
                            <span class="NA">{{item.title}}</span>
                            <span>9.3<span class="small">分</span></span>
                        </div>
                        <div class="ATintroduce">
                        <p class="ATintroduceText">{{item.content}}</p>
                        </div>
                        <div class="ATwriter">
                            <span>{{item.author}}</span>
                            <span class="rq">545万人气</span>
                        </div>
                    </div>
                </router-link>
                <!-- </div> -->
            </div>
        </div>
        <!-- 猜你喜欢 -->
        <div class="AllBox">
            <div class="BookCRMBcontainer">
                <div class="AllTitle">猜你喜欢</div>
                <!-- <div class="AllContent" v-for="(item,index) in booklist[7].list.slice(0,3)" :key="booklist[7].list[index].id"> -->
                <router-link class="AllContent" v-for="(item,index) in booklist[7].list.slice(0,3)" :key="booklist[7].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[7].list[index].id">
                    <div class="AllImg">
                        <img :src="item.cover" alt="">
                    </div>
                    <div class="AllText">
                        <div class="ATname">
                            <span class="NA">{{item.title}}</span>
                            <span>9.3<span class="small">分</span></span>
                        </div>
                        <div class="ATintroduce">
                        <p class="ATintroduceText">{{item.content}}</p>
                        </div>
                        <div class="ATTag">
                            <span>{{item.category}}</span> ·
                            <span>{{item.author}}</span> ·
                            <span>121万字</span> 
                        </div>
                    </div>
                </router-link>
                <!-- </div> -->
                <router-link class="AllContent" v-for="(item,index) in booklist[8].list.slice(0,3)" :key="booklist[8].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[8].list[index].id">
                    <div class="AllImg">
                        <img :src="item.cover" alt="">
                    </div>
                    <div class="AllText">
                        <div class="ATname">
                            <span class="NA">{{item.title}}</span>
                            <span>9.3<span class="small">分</span></span>
                        </div>
                        <div class="ATintroduce">
                        <p class="ATintroduceText">{{item.content}}</p>
                        </div>
                        <div class="ATTag">
                            <span>{{item.category}}</span> ·
                            <span>{{item.author}}</span> ·
                            <span>121万字</span> 
                        </div>
                    </div>
                </router-link>
                <router-link class="AllContent" v-for="(item,index) in booklist[9].list.slice(0,3)" :key="booklist[9].list[index].id" tag="div" :to="'/TheWorkDetails?id='+booklist[9].list[index].id">
                    <div class="AllImg">
                        <img :src="item.cover" alt="">
                    </div>
                    <div class="AllText">
                        <div class="ATname">
                            <span class="NA">{{item.title}}</span>
                            <span>9.3<span class="small">分</span></span>
                        </div>
                        <div class="ATintroduce">
                        <p class="ATintroduceText">{{item.content}}</p>
                        </div>
                        <div class="ATTag">
                            <span>{{item.category}}</span> ·
                            <span>{{item.author}}</span> ·
                            <span>121万字</span> 
                        </div>
                    </div>
                </router-link>
            </div>
        </div>
        <!-- 底部 -->
        <div class="BCR">
            到底部啦!
        </div>
    </div>
</template>

<script>
export default {
    props:["booklist"],
    data(){
        return{
        }
    },
    methods:{

    },
    created(){
        console.log(this.booklist)
    },
    filters:{
        hotCount(value){
            let w = value > 10000? value / 10000 : value; // 万计算
            let y = w > 10000? parseInt(w/10000)+"亿": parseInt(w) + "万";//亿计算
            return y;
        }
    }
}
</script>

<style lang="less">
.BCRB{
    .BookCRMBcontainer{
        width: 89%;
        margin: 0px auto;
    }
    .AllTitle{
        line-height: 65px;
        font-weight: bold;
        font-size: 19px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .AllTbtn{
            line-height: 24px;
            font-size: 13px;
            overflow: hidden;
            border-radius: 20px;
            background-color: #eee;
            text-align: center;
            span{
                text-align: center;
                padding: 8px 12px;
                color: #aaa;
            }
            span.ck{
                color: #333;
                background-color: #fed524;
                border-radius: 20px;
            }
        }
    }
    .AllBox{
        margin: 10px 0px;
        background-color: #fff;
        .BookCRMBcontainer{
            .AllContent{
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-bottom: 20px;
                .AllImg{
                    width: 75px;
                    height: 90px;
                    background-color: lightgreen;
                    border-radius: 4px;
                    overflow: hidden;
                    img{
                        width: 100%;
                    }
                }
                .AllText{
                    width: 75%;
                    .ATname{
                        display: flex;
                        justify-content: space-between;
                        line-height: 24px;
                        span{
                            color: #fba001;
                            font-weight: bold;
                            span.small{
                                font-size: 12px;
                                font-weight: normal;
                            }
                        }
                        span.NA{
                            color: black;
                        }
                    }
                    .ATintroduce{
                        width: 100%;
                        p.ATintroduceText{
                            height: 40px;
                            color:#aaa ;
                            font-size: 14px;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                        }
                    }
                    .ATwriter{
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        line-height: 24px;
                        span{
                            font-size: 14px;
                            color: #aaa;
                        }
                        span.rq{
                            color: #c2812e;
                            font-size: 12px;
                            background-color: #ffe77c;
                            padding: 0px 5px;
                            line-height: 18px;
                        }
                    }
                    .ATTag{
                        font-size: 14px;
                        color: #aaa;
                    }
                }
            }
        }
    }
    .BCRMD{
        background-color: #ffe344;
        padding-bottom: 15px;
        .BookCRMBcontainer{
            .h3{
                width: 190px;
                margin: 0px auto;
                line-height: 100px;
                span{
                    font-size: 20px;
                }
                span.mfred{
                    color: rgb(255, 65, 17);
                    font-weight: bold;
                }
                span.txmiddle{
                    font-weight: bold;
                }
                span.diamond{
                    font-size: 21px;
                    margin-right: 10px;
                }
            }
            .tuijian{
                display: flex;
                justify-content: space-between;
                .tuijianBox{
                    .tjImg{
                        width: 95px;
                        height: 130px;
                        background-color: aqua;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .tjname{
                        font-weight: bold;
                        line-height: 40px;
                        width: 95px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 1;
                        overflow: hidden;
                    }
                }
            }
        }
        
    }
    .popular{
        width: 100%;
        background-color: #fff;
        .BookCRMBcontainer{
            .popContent{
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                .popli{
                    display: flex;
                    height: 85px;
                    padding-bottom: 20px;
                    .popliImg{
                        width: 75px;
                        height: 90px;
                        background-color: pink;
                        position: relative;
                        border-radius: 4px;
                        overflow: hidden;
                        img{
                            width: 100%;
                            height: 100%;
                            z-index: 2;
                        }
                        span.popTag{
                            position:absolute;
                            top: 0px;
                            left: 0px;
                            z-index: 3;
                            background-image: linear-gradient(to right ,#ffb500,#ff4a00);
                            color: white;
                            padding-left: 8px;
                            padding-right: 12px;
                            font-size: 12px;
                            border-radius: 0px 0px 50px 0px ;
                        }
                    }
                    .popliText{
                        padding-left: 10px;
                        p.PLTname{
                            width: 80px;
                            height: 40px;
                            font-weight: bold;
                            font-size: 15px;
                            padding-top: 10px;
                            display: -webkit-box;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                        }
                        p.Popularity{
                            font-size: 13px;
                            color: #aaa;
                            line-height: 25px;
                        }
                    }
                }
            }
        }
    }
    .BCR{
        text-align: center;
        margin-bottom: 15px;
        line-height: 30px;
        color: #aaa;
    }
}

</style>